<!-- 看板>重大问题 -->
<template>
<div class="card rdsp-card-view" data-page="fireHazard">
	<div class="card-content rank-content card-content-padding fireHazard-container">
		<div class="rdsp-card-title">
			<!-- <span class="icon"></span>  -->
			<span>火灾高危信号</span>
		</div>
		<div class="rdsp-card-con">
			<div class="fireHazard-content">
				<div class="fireHazard-top">
					<div @click="showRistList(3)">
						<span class="one" id="fireHazard_time_num_{{getNewId}}">0</span>
						<p>实时总数</p>
					</div>
					<div @click="showRistList(1)">
						<span class="two" id="fireHazard_noDeal_num_{{getNewId}}">0</span>
						<p>未处理</p>
					</div>
					<div @click="showRistList(2)">
						<span class="three" id="fireHazard_hasDeal_num_{{getNewId}}">0</span>
						<p>已处理</p>
					</div>
				</div>
				<div id="fireHazard_swiper_{{getNewId}}" class="fireHazard-content fireHazard-swiper" style="padding: 15px;padding-bottom: 20px;">
					<div class="swiper-container" id="fireHazard_swiper_new_{{getNewId}}" style="height: 100px;">
						<div class="swiper-pagination" id="fireHazard_swiper_pagination_new_{{getNewId}}" style="bottom: -4px;display: none;"></div>
						<div class="swiper-wrapper" id="fireHazardList_{{getNewId}}"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>
<style scoped>
.fireHazard-top {
	padding-top: 20px;
	display: inline-block;
	width: 100%;
}

.fireHazard-top div {
	width: 33%;
	height: 100%;
	float: left;
	text-align: center;
	color: rgba(68, 68, 68, 1);
}

.fireHazard-top .one {
	color: rgba(250, 124, 90, 1);
}

.fireHazard-top div span {
	font-size: 24px;
}

.fireHazard-top div p {
	font-size: 14px;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
}

.fireHazard-swiper {
	background: rgba(225, 225, 225, 0.2);
}

.fireHazard-item{
	position: relative;
	padding: 15px 20px;
	width: 100%!important;
}
.fireHazard-item .fireHazard-item-quatity{
	position: absolute;
	top: 0;
	text-align: center;
}
.fireHazard-item .fireHazard-item-quatity div{
	font-size:50px;
	font-family:PingFangSC-Regular;
	font-weight:400;
	color:rgba(250,124,90,1);
}
.fireHazard-item .fireHazard-item-quatity span{
	font-size: 14px;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
}
.fireHazard-item .fireHazard-item-info{
	margin-left: 80px;
}
.fireHazard-item .fireHazard-item-info P {
	font-size: 14px;
	font-weight: 400;
	color: rgba(102, 102, 102, 1);
	padding: 8px 0px;
}

.fireHazard-item .fireHazard-item-info P:first-child {
	padding: 0px;
	font-size: 17px;
	font-weight: 500;
	color: rgba(22, 22, 22, 1);
	font-size: 17px;
}

.fireHazard-swiper .progressbar {
	width: 80%;
	height: 6px;
}

.fireHazard-swiper .progressbar span {
	background: rgba(250, 124, 90, 1);
	border-radius: 3px;
}
</style>
<script>
	return {
		data : function() {
			return {
				getNewId: (new Date()).getTime()
			}
		},
		methods : {
			getHighRiskCountData : function() {
				var self = this;
				var $ = self.$$;
				var id_org = "";
				if (single_Orgid == "") {
					id_org = userInfor.organizationIds;
				} else {
					id_org = single_Orgid;
				}
				Dao.getHighRiskCount({
					userName : userInfor.accountName,
					deviceId : appKeyObj.deviceId,
					organizationIds : id_org
				}, function(re) {
					$("#fireHazard_time_num_" + self.getNewId).html(re.totalCount || 0);
					$("#fireHazard_noDeal_num_" + self.getNewId).html(re.unHandlerCount || 0);
					$("#fireHazard_hasDeal_num_" + self.getNewId).html(re.handlerCount || 0);
				});
			},
			getFirstHighRiskData : function() {
				var self = this;
				var $ = self.$$;
				var id_org = "";
				if (single_Orgid == "") {
					id_org = userInfor.organizationIds;
				} else {
					id_org = single_Orgid;
				}
				Dao.getFirstHighRisk({
					userName : userInfor.accountName,
					deviceId : appKeyObj.deviceId,
					organizationIds : id_org
				}, function(re) {
					if (re && re.length > 0) {
						for (var i = 0; i < re.length; i++) {
							//计算持续时长画进度条
						    var total = 24*60*60*1000;
							let percentageNum = 100;
							if(total > re[i].durationTime){
								percentageNum = (((re[i].durationTime)/total).toFixed(2)*100)
							}
							let percentageRealNum = percentageNum-100;
							jQuery("#fireHazardList_" + self.getNewId).append(`
							  <div class="swiper-slide fireHazard-item" id="fireHazard-item_` + self.getNewId + `" data-id="`+re[i].id+`">
								<a href="#" id="showRistDetail_` +self.getNewId +`" data-id="`+re[i].id+`">
									<div class="fireHazard-item-quatity">
										<div>`+re[i].alertNum+`</div>
										<span>火情数</span>
									</div>
									<div class="fireHazard-item-info">
										<p>`+re[i].organizationName+`</p>
										<p>已持续`+re[i].intervalTime+`</p>
										<div data-progress="80" 
							                 class="progressbar progressbar-height">
											<span style="transform: translate3d(`+percentageRealNum+`%, 0px, 0px);" class=""></span>
										</div>
									</div>
							   	</a>
							  </div>
								`);
						}

						let swiper = new Swiper("#fireHazard_swiper_new_" + self.getNewId, {
						      loop: false,
						      pagination: {
						          el: "#fireHazard_swiper_pagination_new_" + self.getNewId,
						      },
						});

						jQuery("#fireHazard-item_" + self.getNewId).off().click(function(){
							var id = $(this).attr("data-id");
							self.showRistDetail(id);
						});
					} else {
						$("#fireHazard_swiper_" + self.getNewId).css("display", "none");
					}
				});
			},
			showRistList : function(type) {
				app.router.navigate("/fireHazardList/" + type + "/");
			},
			showRistDetail : function(id) {
				var self = this;
				app.router.navigate("/fireHazardDetail/" + id + "/0/");
			}
		},
		on : {
			pageAfterIn : function(e, page) {
				var self = this;
				self.getHighRiskCountData();
				self.getFirstHighRiskData();
			},
		}
	}
</script>
